/**
 * Created by yoyoyk on 2017/3/18.
 */

import React from "react";
import Confirm from '../../common/Confirm'
import Select from '../../common/Select'
import InputBox from '../../common/InputBox'

/*信息列表*/
export default class Companyhome extends React.Component{
    constructor(props){
        super(props);
        this.state={
            text: 1
        }


        this.arr=["山东省德州市天才制衣厂","XXXXXXXX","制衣厂","山东省德州市","XX路XX号","400-773883"]
        this.arr2=["成衣","面料","纱线","辅料"]
        this.arr3=["针织","梭织","无纺布","丝绸","皮草"]
        this.arr4=[
            {num:"1",name:"",type:"梭织",door:"",square:"",density:"",shazhi:"",jiegou:"",chengfen:"",jingweisha:"",suoshuilv:"",gongyi:"",yongtu:"",calc:"",beizhu:"",company:"查看"},
            {num:"2",name:"",type:"梭织",door:"",square:"",density:"",shazhi:"",jiegou:"",chengfen:"",jingweisha:"",suoshuilv:"",gongyi:"",yongtu:"",calc:"",beizhu:"",company:"查看"},
            {num:"3",name:"",type:"梭织",door:"",square:"",density:"",shazhi:"",jiegou:"",chengfen:"",jingweisha:"",suoshuilv:"",gongyi:"",yongtu:"",calc:"",beizhu:"",company:"查看"},
            {num:"4",name:"",type:"梭织",door:"",square:"",density:"",shazhi:"",jiegou:"",chengfen:"",jingweisha:"",suoshuilv:"",gongyi:"",yongtu:"",calc:"",beizhu:"",company:"查看"}
        ]
    }

    componentWillMount(){

    }

    attch() {
        return this.arr.map((item, index) => {
                return (
                        <span key={index + "-"} style={{width:300,height:36,lineHeight:"36px",display:"block"}}>{item}</span>
                )
            }
        )
    }

    handleclick1(){}

    handleclick2(){}

    serch(){}

    check(){}

    changePageNum(e){
        let numtest = /^[0-9]*$/;
        let text = e.target.value
        if(!numtest.test(text)){
            return
        }
        this.setState({
            text:text
        });
    }

    sortone(){
        return this.arr2.map((item2, index) => {
                return (
                    <span key={index + "-"} onClick={this.handleclick1.bind(this)} style={{width:86,height:20,lineHeight:"20px",display:"block",float:"left",border:"1px solid #ccc",textAlign:"center",marginTop:"10px",marginLeft:"10px",cursor:"pointer"}}>{item2}</span>
                )
            }
        )
    }
    sorttwo(){
        return this.arr3.map((item3, index) => {
                return (
                    <span key={index + "-"} onClick={this.handleclick2.bind(this)} style={{width:86,height:20,lineHeight:"20px",display:"block",float:"left",border:"1px solid #ccc",textAlign:"center",marginTop:"10px",marginLeft:"10px",cursor:"pointer"}}>{item3}</span>
                )
            }
        )
    }

    accordgoods(){
        return this.arr4.map((item4,index)=>{
            return (
                <tr key={index + "-"} >
                    <th style={{border:"1px solid #ccc"}}>{item4.num}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.name}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.type}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.door}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.square}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.density}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.shazhi}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.jiegou}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.chengfen}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.jingweisha}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.suoshuilv}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.gongyi}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.yongtu}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.calc}</th>
                    <th style={{border:"1px solid #ccc"}}>{item4.beizhu}</th>
                    <th style={{border:"1px solid #ccc",cursor:"pointer",color:"#3f9cb5"}} onClick={this.check.bind(this)}>{item4.company}</th>
                </tr>
            )
        })
    }


    render() {
        return (
           <div style={{width:1223,minHeight:600,background:"#fff"}}>
               <div style={{height:76,color:"#3f9cb5",lineHeight:"98px",fontSize:"16px",paddingLeft:"30px"}}>
                   企业信息
                    <p style={{height:2,width:1105,background:"#66ccff",marginTop:"50px",float:"right"}}></p>
               </div>
               <div style={{position:"relative",paddingLeft:"30px",height:"auto"}}>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>企业名称：</p>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>组织机构代码：</p>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>企业类型：</p>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>企业地址：</p>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>详细地址：</p>
                   <p style={{width:100,textAlign:"right",height:36,lineHeight:"36px"}}>联系方式：</p>
                   <div style={{width:300,height:200,position:"absolute",left:"130px",top:"0px"}}>
                       {
                           this.attch()
                       }
                   </div>
               </div>

               <div style={{height:76,color:"#3f9cb5",lineHeight:"98px",fontSize:"16px",paddingLeft:"30px"}}>
                   产品服务
                   <p style={{height:2,width:1105,background:"#66ccff",marginTop:"50px",float:"right"}}></p>
               </div>
               <div style={{border:"1px dashed #ccc",minHeight:"412px",position:"relative"}}>
                   <p style={{width:110,textAlign:"right",height:40,lineHeight:"40px"}}>一级分类：</p>
                   <p style={{width:110,textAlign:"right",height:40,lineHeight:"40px"}}>二级分类：</p>
                   <div style={{position:"absolute",left:"110px",top:0,height:40,width:800}}>
                       {
                           this.sortone()
                       }
                   </div>
                   <div style={{position:"absolute",left:110,top:40,height:40,width:800}}>
                       {
                           this.sorttwo()
                       }
                   </div>

                   <p style={{width:300,height:30,position:"absolute",left:"30px",top:"113px"}}>符合条件的产品共有<span>22</span>件：</p>
                    <InputBox titletext="品名：" space={20} style={{width:195,height:24,border:"1px solid #ccc",paddingRight:"116px",marginTop:"35px"}} defaultvalute={"输入品名搜索"}/>
                   <span onClick={this.serch.bind(this)} style={{cursor:"pointer",width:53,height:24,border:"1px solid #ccc",textAlign:"center",lineHeight:"24px",display:"block",position:"absolute",right:"44px",top:"115px",borderRadius:"4px"}} >搜索</span>


                   <table style={{width: 1128, borderCollapse: "collapse",position:"absolute",left:"30px",top:"180px"}}>
                       <thead>
                            <tr>
                                <th style={{border:"1px solid #ccc"}} >序号</th>
                                <th style={{border:"1px solid #ccc"}}>品名</th>
                                <th style={{border:"1px solid #ccc"}}>商品类型</th>
                                <th style={{border:"1px solid #ccc"}}>门幅</th>
                                <th style={{border:"1px solid #ccc"}}>平方米克重</th>
                                <th style={{border:"1px solid #ccc"}}>密度</th>
                                <th style={{border:"1px solid #ccc"}}>纱支</th>
                                <th style={{border:"1px solid #ccc"}}>组织结构</th>
                                <th style={{border:"1px solid #ccc"}}>成分</th>
                                <th style={{border:"1px solid #ccc"}}>经纬纱</th>
                                <th style={{border:"1px solid #ccc"}}>缩水率</th>
                                <th style={{border:"1px solid #ccc"}}>柒整工艺</th>
                                <th style={{border:"1px solid #ccc"}}>用途</th>
                                <th style={{border:"1px solid #ccc"}}>计量单位</th>
                                <th style={{border:"1px solid #ccc"}}>备注</th>
                                <th style={{border:"1px solid #ccc"}}>生产企业</th>
                            </tr>
                       </thead>
                        <tbody>
                            {
                                this.accordgoods()
                            }
                        </tbody>
                   </table>
                   <ul style={{width:390,height:26,position:"absolute",right:0,bottom:32}}>
                       <li style={{float:"left",height:30,lineHeight:"30px",marginRight:"15px"}} >总计<span>2</span>条</li>
                       <li style={{float:"left",height:30,lineHeight:"30px",marginRight:"15px"}}>每页<span>2</span>条</li>

                       <li style={{float:"left",height:30,lineHeight:"30px",marginRight:"15px"}}>第<input type="text" className="page_input" value={this.state.text} onChange={this.changePageNum.bind(this)}/>页</li>
                       <li style={{float:"left",height:30,lineHeight:"30px",marginRight:"15px"}}>共<span>1</span>页</li>

                       <li style={{float:"left",height:30,lineHeight:"30px"}}>
                           <i style={{cursor:"pointer"}}> 上一页</i>
                           <i style={{cursor:"pointer"}}> 下一页</i>
                       </li>
                   </ul>
               </div>
           </div>
        )
    }
}




